<template>
	<view class="elderly-details-page">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 基本信息区域 -->
		<view v-else class="basic-info-section">
			<view class="elderly-card">
				<view class="card-header">
					<text class="elderly-name">姓名: {{ elderlyInfo.name || '未知' }}</text>
					<view class="status-tag">
						<text class="status-text">{{ elderlyInfo.status || '未知状态' }}</text>
					</view>
				</view>
				
				<view class="info-grid">
					<view class="info-row">
						<view class="info-item">
							<text class="info-label">性别</text>
							<text class="info-value">{{ elderlyInfo.gender }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">年纪</text>
							<text class="info-value">{{ elderlyInfo.age }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">身份证号</text>
							<text class="info-value">{{ elderlyInfo.idCard }}</text>
						</view>
					</view>
					<view class="info-row">
						<view class="info-item">
							<text class="info-label">籍贯</text>
							<text class="info-value">{{ elderlyInfo.origin }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">婚姻状况</text>
							<text class="info-value">{{ elderlyInfo.maritalStatus }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">既往病史</text>
							<text class="info-value">{{ elderlyInfo.medicalHistory }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">过敏史</text>
							<text class="info-value">{{ elderlyInfo.allergies }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 护理记录列表区域 -->
		<view v-if="!loading" class="care-records-section">
			<view class="section-header">
				<view class="title-line"></view>
				<text class="section-title">护理记录</text>
			</view>
			
			<view v-if="careRecords.length === 0" class="empty-records">
				<text class="empty-text">暂无护理记录</text>
			</view>
			
			<view v-else class="records-list">
				<view class="record-card" v-for="(record, index) in processedCareRecords" :key="record.id">
					<view class="record-header">
						<text class="record-title">{{ record.title }}</text>
						<text class="record-time">{{ record.create_time }}</text>
					</view>
					
					<view class="record-content">
						<!-- 健康指标 -->
						<view class="health-indicators">
							<view class="indicator-item">
								<text class="indicator-label">体温</text>
								<text class="indicator-value">{{ record.health_temperature }}</text>
							</view>
							<view class="indicator-item">
								<text class="indicator-label">血压</text>
								<text class="indicator-value">{{ record.health_pressure }}</text>
							</view>
							<view class="indicator-item">
								<text class="indicator-label">心率</text>
								<text class="indicator-value">{{ record.health_rate }}</text>
							</view>
						</view>
						
						<!-- 饮食记录 -->
						<view class="meal-records">
							<view class="meal-item">
								<text class="meal-label">早餐</text>
								<text class="meal-value">{{ record.food_morning }}</text>
							</view>
							<view class="meal-item">
								<text class="meal-label">午餐</text>
								<text class="meal-value">{{ record.food_noon }}</text>
							</view>
							<view class="meal-item">
								<text class="meal-label">晚餐</text>
								<text class="meal-value">{{ record.food_evening }}</text>
							</view>
						</view>
						
						<!-- 备注信息 -->
						<view v-if="record.remark" class="record-remark">
							<text class="remark-label">备注：</text>
							<text class="remark-text">{{ record.remark }}</text>
						</view>
						
						<!-- 图片展示 -->
						<view v-if="record.processedPics && record.processedPics.length > 0" class="record-images">
							<image 
								v-for="(pic, picIndex) in record.processedPics" 
								:key="picIndex" 
								:src="pic" 
								class="record-image"
								mode="aspectFill"
								@tap="previewImage(pic, record.processedPics)"
							/>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部录入信息按钮 -->
		<view class="bottom-action">
			<button class="action-btn" @tap="enterInfo">录入信息</button>
		</view>
	</view>
</template>

<script>
import { apiGetElderlyDetailRecords } from '@/request/api.js'

export default {
	data() {
		return {
			elderlyId: '',
			loading: false,
			elderlyInfo: {
				name: '',
				gender: '',
				age: '',
				idCard: '',
				origin: '',
				maritalStatus: '',
				medicalHistory: '',
				allergies: '',
				status: ''
			},
			careRecords: [], // 护理记录列表
			memberInfo: {} // 老人基础信息
		}
	},
	onLoad(options) {
		if (options.id) {
			this.elderlyId = options.id;
			// 根据ID加载老人信息
			this.loadElderlyDetailRecords();
		}
	},
	computed: {
		// 处理护理记录中的图片数据
		processedCareRecords() {
			return this.careRecords.map(record => {
				let processedPics = [];
				if (record.pics && record.pics.length > 0) {
					// 处理图片URL，可能是数组或者字符串
					record.pics.forEach(pic => {
						if (typeof pic === 'string') {
							// 处理可能包含多个URL的字符串（用|分隔）
							const urls = pic.split('|').filter(url => url.trim());
							processedPics.push(...urls);
						}
					});
				}
				return {
					...record,
					processedPics
				};
			});
		}
	},
	methods: {
		// 加载老人详情记录
		async loadElderlyDetailRecords() {
			if (this.loading) return;
			
			try {
				this.loading = true;
				
				const requestData = {
					member_id: this.elderlyId
				};
				
				const response = await apiGetElderlyDetailRecords(requestData);
				
				if (response.code === 0 && response.data.code === 0) {
					// 设置护理记录
					this.careRecords = response.data.data || [];
					
					// 设置老人基础信息
					if (response.data.member) {
						this.memberInfo = response.data.member;
						this.processElderlyInfo(response.data.member);
					}
				} else {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载老人详情记录失败:', error);
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 处理老人信息数据
		processElderlyInfo(member) {
			this.elderlyInfo = {
				name: member.name || '未知',
				gender: member.sex === 0 ? '女' : '男',
				age: this.calculateAge(member.birthday),
				idCard: member.id_num || '未填写',
				origin: this.getLocation(member.province, member.city, member.area),
				maritalStatus: this.getMaritalStatus(member.marray),
				medicalHistory: member.history || '无',
				allergies: member.mi_history || '无',
				status: member.status === 1 ? '已入驻' : '未入驻'
			};
		},
		
		// 计算年龄
		calculateAge(birthday) {
			if (!birthday || birthday === '0000-00-00') return '未知';
			const birth = new Date(birthday);
			const today = new Date();
			let age = today.getFullYear() - birth.getFullYear();
			const monthDiff = today.getMonth() - birth.getMonth();
			if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
				age--;
			}
			return age > 0 ? age.toString() : '未知';
		},
		
		// 获取地址信息
		getLocation(province, city, area) {
			const location = [province, city, area].filter(item => item && item.trim()).join('');
			return location || '未填写';
		},
		
		// 获取婚姻状况
		getMaritalStatus(marray) {
			switch (marray) {
				case 1: return '未婚';
				case 2: return '已婚';
				case 3: return '离异';
				case 4: return '丧偶';
				default: return '未知';
			}
		},
		
		// 预览图片
		previewImage(current, urls) {
			uni.previewImage({
				current: current,
				urls: urls
			});
		},
		
		// 录入信息
		enterInfo() {
			uni.navigateTo({
				url: `/pages/infoEntry/infoEntry?id=${this.elderlyId}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.elderly-details-page {
	min-height: 100vh;
	background: #F5F5F5;
	padding: 20rpx;
}

/* 基本信息区域 */
.basic-info-section {
	margin-bottom: 30rpx;
}

.elderly-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 0;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
}

.card-header {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
}

.elderly-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.status-tag {
	background: #4CAF50;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
}

.status-text {
	font-size: 24rpx;
	color: #FFFFFF;
}

.info-grid {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	margin: 20rpx;
	background: linear-gradient(0deg, #ffffff33 0%, #ffffff33 100%), #F9FAFB;
	border-radius: 16rpx;
}

.info-row {
	display: flex;
	gap: 16rpx;
}

.info-row:first-child {
	justify-content: space-between;
}

.info-row:first-child .info-item {
	flex: 1;
}

.info-row:last-child {
	justify-content: space-between;
}

.info-row:last-child .info-item {
	flex: 1;
}

.info-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 12rpx;
}

.info-label {
	font-size: 26rpx;
	color: #666666;
	margin-bottom: 8rpx;
}

.info-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

/* 待办活动区域 */
.pending-activities-section {
	margin-bottom: 30rpx;
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.title-line {
	width: 8rpx;
	height: 32rpx;
	background: #FF7D00;
	border-radius: 4rpx;
	margin-right: 16rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.activity-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.activity-grid {
	display: flex;
	justify-content: space-between;
	gap: 20rpx;
}

.activity-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
}

.activity-label {
	font-size: 26rpx;
	// color: rgba(255, 255, 255, 0.8);
	margin-bottom: 8rpx;
}

.activity-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

/* 加载状态 */
.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #999999;
}

/* 护理记录区域 */
.care-records-section {
	margin-bottom: 120rpx; /* 为底部按钮留出空间 */
	padding: 0 20rpx;
}

.empty-records {
	text-align: center;
	padding: 80rpx 40rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}

.records-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.record-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 15rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.record-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
}

.record-time {
	font-size: 24rpx;
	color: #999999;
}

.record-content {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

/* 健康指标 */
.health-indicators {
	display: flex;
	justify-content: space-between;
	gap: 15rpx;
	padding: 20rpx;
	background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%);
	border-radius: 12rpx;
}

.indicator-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.indicator-label {
	font-size: 24rpx;
	color: #666666;
	margin-bottom: 8rpx;
}

.indicator-value {
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
}

/* 饮食记录 */
.meal-records {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	padding: 20rpx;
	background: linear-gradient(135deg, #FFF3E0 0%, #F1F8E9 100%);
	border-radius: 12rpx;
}

.meal-item {
	display: flex;
	align-items: flex-start;
	gap: 15rpx;
}

.meal-label {
	font-size: 26rpx;
	color: #666666;
	font-weight: bold;
	min-width: 80rpx;
}

.meal-value {
	font-size: 26rpx;
	color: #333333;
	flex: 1;
	line-height: 1.4;
}

/* 备注信息 */
.record-remark {
	padding: 20rpx;
	background: #F8F9FA;
	border-radius: 12rpx;
	border-left: 4rpx solid #FF7D00;
}

.remark-label {
	font-size: 26rpx;
	color: #666666;
	font-weight: bold;
}

.remark-text {
	font-size: 26rpx;
	color: #333333;
	line-height: 1.5;
	margin-left: 10rpx;
}

/* 图片展示 */
.record-images {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	padding: 20rpx;
	background: #FAFAFA;
	border-radius: 12rpx;
}

.record-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
	object-fit: cover;
}

/* 底部按钮 */
.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background: #FFFFFF;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.action-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(135deg, #FF7D00 0%, #FF4856 100%);
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: bold;
	border-radius: 45rpx;
	border: none;
}
</style> 